<template>
  <div>
    <div class="money">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button @click="download" style="float: right; padding: 3px 0" type="text">下载发票</el-button>
            </div>
            <div class="text item">
              <img ref="img" style="width: 400px" :src="imgUrl" alt="" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button @click="downs" style="float: right; padding: 3px 0" type="text">下载不同源发票</el-button>
            </div>
            <div class="text item">
              <img ref="myimg" style="width: 400px" src="https://huwei-1312277086.cos.ap-nanjing.myqcloud.com/%E5%8F%91%E7%A5%A8.jpg" alt="" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button @click="down()" style="float: right; padding: 3px 0" type="text">下载本地发票</el-button>
            </div>
            <div class="text item">
              <img class="img1" style="width: 400px" :src="imgUrl" alt="" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FirstProjectInvoice',

  data() {
    return {
      imgUrl: 'https://huwei-1312277086.cos.ap-nanjing.myqcloud.com/%E5%8F%91%E7%A5%A8.jpg'
    }
  },

  mounted() {},

  methods: {
    /**
     * 下载发票
     */
    download() {
      //1. 新窗口打开
      let url = this.$refs.img
      window.location.href = url.src
    },
    //必须同源才能下载
    down() {
      var alink = document.createElement('a')
      alink.href = this.imgUrl
      console.log(this.imgUrl)
      alink.download = 'pic' //图片名
      alink.click()
    },
    //解决图片不同源下载问题：
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image() //<img />
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png') //得到图片的base64编码数据 图片格式，默认为 image/png
        var a = document.createElement('a') // 生成一个a元素
        var event = new MouseEvent('click') // 创建一个单击事件
        a.download = name || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
    },
    downs() {
      this.downloadIamge(this.$refs.myimg.src, 'pic')
    }
  }
}
</script>

<style lang="scss" scoped>
.money {
  margin-top: 20px;
}
</style>
